<template>
	<view>
		<u-action-sheet round="10" title="请输入支付密码" @close="close" :safeAreaInsetBottom="true" :show="showAgent">
			<view class="border-top pt-20">
				<view class="flex-row items-center jty-center">
					<view class="flex-row bor-rad-8 border-left border-top border-bottom over-hidden">
						<view v-for="(item,index) in 6" :key="index"
							class="w-52 h-50 border-right flex-row items-center jty-center">
							<image v-if="(index+1)<=passList.length" class="wh-8"
								src="https://img.yummall.cn/baiyetong/yunmaobms/static/images/jieShuan/mimayin.png"
								mode=""></image>
						</view>
					</view>
				</view>
				<view class="mt-12 border-top">
					<!-- border:'1rpx solid #f1f1f1 !important', -->
					<u-grid @click="passClick" :border="true">
						<u-grid-item :customStyle="{height:'8vh'}" v-for="(item,index) in numList" :key="item.name"
							:name="item.name" :bgColor="((item.name == 10 || item.name == 12))?'#ededed':'white'">
							<view v-if="!(item.name == 10 || item.name == 12)">
								<text class="text-size-24 text-bold">{{item.name}}</text>
							</view>
							<view v-if="item.name == 12" class="flex-row items-center jty-center">
								<image class="wh-40"
									src="https://img.yummall.cn/baiyetong/yunmaobms/static/images/jieShuan/KeyboardDeleteOutlined.png"
									mode="">
								</image>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</u-action-sheet>


		<view class="h-0 w-0">
			<!-- 支付密码错误，请重试 -->
			<u-modal :show="passErrorShowAgent" @confirm="confirm" @close="confirm" @cancel="toSetPass"
				confirmColor="#8848CB" confirmText="重试" cancelText="忘记密码" :closeOnClickOverlay="true"
				:showCancelButton="true">
				<view class="flex-row jty-center items-center">
					<text class="text-size-18">支付密码错误，请重试</text>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		name: "uni-byt-passwordInput",
		// close:弹窗关闭  change:密码输入完成回调
		emits: ['close', 'change'],
		props: {
			// 密码输入弹窗
			show: {
				type: Boolean,
				default: false
			},
			// 设置支付密码页面路径
			setPassPath: {
				type: String,
				default: ''
			},
			// 密码错误提示弹窗
			passErrorShow: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				numList: [{
						name: 1
					},
					{
						name: 2
					},
					{
						name: 3
					},
					{
						name: 4
					},
					{
						name: 5
					},
					{
						name: 6
					},
					{
						name: 7
					},
					{
						name: 8
					},
					{
						name: 9
					},
					{
						name: 10
					},
					{
						name: 0
					},
					{
						name: 12
					}
				],
				// 输入的密码
				passList: []
			};
		},
		computed: {
			showAgent: {
				get() {
					return this.show
				},
				set(val) {
					this.$emit("update:show", val)
				}
			},
			passErrorShowAgent: {
				get() {
					return this.passErrorShow
				},
				set(val) {
					if (val) {
						this.showAgent = false
					} else {
						this.showAgent = true
					}
					this.$emit("update:passErrorShow", val)
				}
			}
		},
		methods: {
			confirm() {
				this.passErrorShowAgent = false
				this.showAgent = true
				this.passList = []
			},
			// 前往支付密码设置
			toSetPass() {
				const setPassPath = this.setPassPath
				if (setPassPath) {
					uni.navigateTo({
						url: setPassPath
					})
					console.log("支付密码设置");
					this.close()
					this.passErrorShowAgent = false
					this.showAgent = false
				} else {
					uni.$u.toast("未传递设置支付密码页面路径")
				}
			},
			close() {
				this.showAgent = false
				this.passList = []
				this.$emit("close")
			},
			// 密码点击
			passClick(name) {
				if (!(name == 10 || name == 12)) {
					console.log("密码点击:", name);
					if (this.passList.length < 6) {
						this.passList.push(name)
						if (this.passList.length == 6) {
							const password = this.passList.join('')
							this.$emit("change", password)
							this.close()
						}
					}
				} else {
					if (name == 12) {
						if (this.passList.length > 0) {
							this.passList.pop()
						}
					}
				}
			}
		}
	}
</script>

<style scoped>
</style>